<template>
    <view>
        <view class="search-content" style="position: relative;">
            <view class="search-icon" style="position: absolute; display: inline-block;" @tap="search_icon_event">
                <uni-icons type="search" size="20" color="#b7b7b7"></uni-icons>
            </view>
            <input type="text" confirm-type="search" class="round" :placeholder="propPlaceholder" :value="propDefaultValue" @input="search_input_event" 
            style="color:#666; background:#f0f0f0; border:1px solid '';">
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {};
        },
        components: {},
        props: {
            propPlaceholder: {
            	type: String,
            	default: '其实搜索很简单 ^_^!'
            },
            propDefaultValue: {
            	type: String,
            	default: ''
            },
            propIsRequired: {
            	type: Boolean,
            	default: true
            },
            propIsOnEvent: {
            	type: Boolean,
            	default: false
            },
            propIsIconOnEvent: {
            	type: Boolean,
            	default: false
            },
        },
        methods: {
            // 搜索事件
            search_input_event(e) {
                var keywords = e.detail.value || null;
                
                // 是否验证必须要传值
                if (this.propIsRequired && keywords == null) {
                    uni.showToast({title: "请输入搜索关键字",icon: "error"});
                    return false;
                }
                // 是否回调事件
                if(this.propIsOnEvent) {
                    this.$emit('onsearch', keywords);
                }
            },
            
            // icon事件
            search_icon_event(e) {
                // 是否回调事件
                if(this.propIsIconOnEvent) {
                    this.$emit('onicon', {});
                }
            }
        }
    };
</script>
<style>
    .search-content .search-icon {
        line-height: 14px;
        left: 10px;
        top: calc(50% - 11px);
        z-index: 1;
        padding: 5px;
    }
    .search-content input {
        font-size: 14px;
        padding: 0 15px 0 38px;
        box-sizing: border-box;
        height: 35px;
        line-height: 35px;
    }
</style>